<template>
  <div>
    <el-row :gutter="20">
      <el-form
        :model="policyForm"
        :rules="policyRules"
        ref="policyForm"
        label-width="140px"
      >
        <el-col :span="8">
          <el-form-item label="政策名称:" prop="polName">
            <el-input
              class="haruyuki-width-100"
              size="small"
              v-model="policyForm.polName"
              placeholder="请输入政策名称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
            <el-form-item label="政策类型:" prop="polType">
              <el-select
                class="haruyuki-width-100"
                size="small"
                v-model="policyForm.polType"
                placeholder="请选择政策类型"
              >
                <el-option
                  :label="item.dictValue"
                  :value="item.dictKey"
                  v-for="(item, index) in polTypeList"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        <el-col :span="8">
          <el-form-item label="选择通道:" prop="aisleData">
            <el-select
              class="haruyuki-width-100"
              size="small"
              value-key="aisleCode"
              v-model="policyForm.aisleData"
              @change="templateAllChange"
              placeholder="请选择通道"
            >
              <el-option
                v-for="item in aisleList"
                :key="item.aisleCode"
                :label="item.aisleName"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div class="haruyuki-flex-x-end haruyuki-mb-20" v-if="data.length > 0">
      <div class="haruyuki-mr-20">
        <span>成本费率：</span>
        <el-input-number
          size="mini"
          v-model="aptTemplate.aptRate"
          :precision="4"
          :step="0.0001"
          :min="0"
          :max="1"
        ></el-input-number>
        <span> %</span>
      </div>
      <div class="haruyuki-mr-20">
        <span>结算比例：</span>
        <el-input-number
          size="mini"
          v-model="aptTemplate.aptScale"
          :precision="0"
          :min="1"
          :max="100"
        ></el-input-number>
        <span> %</span>
      </div>
      <el-button type="primary" size="small" plain @click="submitCover"
        >一键填入</el-button
      >
    </div>
    <div
      class="aisle-policy-box haruyuki-mb-20"
      v-for="(dataItem, index) in data"
      :key="index"
    >
      <div
        class="
          haruyuki-width-100
          haruyuki-flex-space-between haruyuki-align-items-center
          aisle-policy-bg
        "
      >
        <div>
          <span
            class="haruyuki-size-16 policy-ml-3 policy-mr-3"
            @click="dataItem.isShow = !dataItem.isShow"
            ><i
              :class="
                dataItem.isShow ? 'el-icon-caret-bottom' : 'el-icon-caret-right'
              "
            ></i
            >通道名称：{{ dataItem.aisleName }}</span
          >
        </div>
        <div class="policy-mr-3">
          <el-button
            type="danger"
            size="mini"
            plain
            @click.stop="policyDelete(index)"
            >删除</el-button
          >
        </div>
      </div>
      
      <div v-show="dataItem.isShow">
        <div class="haruyuki-line-height-special haruyuki-plr-40">
          <span>扫码垫资费费率：</span>
          <el-input-number
              size="mini"
              v-model="dataItem.codeAdvanceRate"
              :precision="4"
              :step="0.0001"
              :min="0"
              :max="1"
          ></el-input-number>
          <span> %</span>
        </div>
        <div class="haruyuki-line-height-special haruyuki-plr-40">
          <span>成本费率：</span>
          <el-input-number
            size="mini"
            v-model="dataItem.aptRate"
            :precision="4"
            :step="0.0001"
            :min="0"
            :max="1"
          ></el-input-number>
          <span> %</span>
        </div>
        <div class="haruyuki-line-height-special haruyuki-plr-40">
          <span>结算比例：</span>
          <el-input-number
            size="mini"
            v-model="dataItem.aptScale"
            :precision="0"
            :min="1"
            :max="100"
          ></el-input-number>
          <span> %</span>
        </div>
        <div v-if="dataItem.isShowUnionPay == 1">
          <div v-if="dataItem.serviceForm">
            <div class="haruyuki-line-height-special haruyuki-plr-40" @click="dataItem.serviceForm.isShow = !dataItem.serviceForm.isShow">
              <i :class="dataItem.serviceForm.isShow ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"></i>
              <span>服务商-云闪付(结算成本)：</span>
            </div>
            <div v-show="dataItem.serviceForm.isShow">
              <div class="haruyuki-line-height-special haruyuki-plr-80">
                <span>借记卡（≥1000）成本费率（比例）：</span>
                <el-input-number
                  size="mini"
                  v-model="dataItem.serviceForm.debitRate"
                  :precision="4"
                  :step="0.0001"
                  :min="0"
                  :max="1"
                ></el-input-number>
                <span> %</span>
              </div>
              <div class="haruyuki-line-height-special haruyuki-plr-80">
                <span>贷记卡（≥1000）成本费率（比例）：</span>
                <el-input-number
                  size="mini"
                  v-model="dataItem.serviceForm.creditRate"
                  :precision="4"
                  :step="0.0001"
                  :min="0"
                  :max="1"
                ></el-input-number>
                <span> %</span>
              </div>
              <div class="haruyuki-line-height-special haruyuki-plr-80">
                <span>借记卡大额封顶金额（笔）：</span>
                <el-input-number
                  size="mini"
                  v-model="dataItem.serviceForm.debitGtMax"
                  :precision="2"
                  :step="0.1"
                  :min="0"
                ></el-input-number>
                <span> ¥</span>
              </div>
              <div class="haruyuki-line-height-special haruyuki-plr-80">
                <span>借记卡小额封顶金额（笔）：</span>
                <el-input-number
                  size="mini"
                  v-model="dataItem.serviceForm.debitLtMax"
                  :precision="2"
                  :step="0.1"
                  :min="0"
                ></el-input-number>
                <span> ¥</span>
              </div>
            </div>
          </div>

          <div v-if="dataItem.merchantForm">
            <div class="haruyuki-line-height-special haruyuki-plr-40" @click="dataItem.merchantForm.isShow = !dataItem.merchantForm.isShow">
              <i :class="dataItem.merchantForm.isShow ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"></i>
              <span>商户-云闪付(签约费率)：</span>
            </div>
            <div v-show="dataItem.merchantForm.isShow">
              <div class="haruyuki-line-height-special haruyuki-plr-80">
                <span>借记卡（≥1000）签约费率（比例）：</span>
                <el-input-number
                  size="mini"
                  v-model="dataItem.merchantForm.debitRate"
                  :precision="4"
                  :step="0.0001"
                  :min="0"
                  :max="1"
                ></el-input-number>
                <span> %</span>
              </div>
              <div class="haruyuki-line-height-special haruyuki-plr-80">
                <span>贷记卡（≥1000）签约费率（比例）：</span>
                <el-input-number
                  size="mini"
                  v-model="dataItem.merchantForm.creditRate"
                  :precision="4"
                  :step="0.0001"
                  :min="0"
                  :max="1"
                ></el-input-number>
                <span> %</span>
              </div>
              <div class="haruyuki-line-height-special haruyuki-plr-80">
                <span>借记卡大额封顶金额（笔）：</span>
                <el-input-number
                  size="mini"
                  v-model="dataItem.merchantForm.debitGtMax"
                  :precision="2"
                  :step="0.1"
                  :min="0"
                ></el-input-number>
                <span> ¥</span>
              </div>
              <div class="haruyuki-line-height-special haruyuki-plr-80">
                <span>借记卡小额封顶金额（笔）：</span>
                <el-input-number
                  size="mini"
                  v-model="dataItem.merchantForm.debitLtMax"
                  :precision="2"
                  :step="0.1"
                  :min="0"
                ></el-input-number>
                <span> ¥</span>
              </div>
              <div class="haruyuki-line-height-special haruyuki-plr-80">
                <span>最低签约费率（比例）：</span>
                <el-input-number
                  size="mini"
                  v-model="dataItem.merchantForm.aptRate"
                  :precision="4"
                  :step="0.0001"
                  :min="0"
                  :max="1"
                ></el-input-number>
                <span> %</span>
              </div>
              <div class="haruyuki-line-height-special haruyuki-plr-80">
                <span>最低垫资费率（比例）：</span>
                <el-input-number
                  size="mini"
                  v-model="dataItem.merchantForm.codeAdvanceRate"
                  :precision="4"
                  :step="0.0001"
                  :min="0"
                  :max="1"
                ></el-input-number>
                <span> %</span>
              </div>
              <div class="haruyuki-line-height-special haruyuki-plr-80">
                <span>刷卡垫资费率（比例）：</span>
                <el-input-number
                  size="mini"
                  v-model="dataItem.merchantForm.posCodeAdvanceRate"
                  :precision="4"
                  :step="0.0001"
                  :min="0"
                  :max="1"
                ></el-input-number>
                <span> %</span>
              </div>
              <div class="haruyuki-line-height-special haruyuki-plr-80">
                <span>贷记卡刷卡结算底价（比例）：</span>
                <el-input-number
                  size="mini"
                  v-model="dataItem.merchantForm.posCreditRate"
                  :precision="4"
                  :step="0.0001"
                  :min="0"
                  :max="1"
                ></el-input-number>
                <span> %</span>
              </div>
              <div class="haruyuki-line-height-special haruyuki-plr-80">
                <span>借记卡刷卡结算底价（比例）：</span>
                <el-input-number
                  size="mini"
                  v-model="dataItem.merchantForm.posDebitRate"
                  :precision="4"
                  :step="0.0001"
                  :min="0"
                  :max="1"
                ></el-input-number>
                <span> %</span>
              </div>
              <div class="haruyuki-line-height-special haruyuki-plr-80">
                <span>借记卡刷卡封顶金额（笔）：</span>
                <el-input-number
                  size="mini"
                  v-model="dataItem.merchantForm.posDebitRateMax"
                  :precision="2"
                  :step="0.1"
                  :min="0"
                ></el-input-number>
                <span> ¥</span>
              </div>
              <div class="haruyuki-line-height-special haruyuki-plr-80">
                <span>刷卡挥卡结算底价（比例）：</span>
                <el-input-number
                  size="mini"
                  v-model="dataItem.merchantForm.posWaveRate"
                  :precision="4"
                  :step="0.0001"
                  :min="0"
                  :max="1"
                ></el-input-number>
                <span> %</span>
              </div>
              <div class="haruyuki-line-height-special haruyuki-plr-80" v-if="dataItem.merchantForm.isShowVip == 1">
                <span>银联费率（比例）：</span>
                <el-input-number
                  size="mini"
                  v-model="dataItem.merchantForm.unionpayRate"
                  :precision="4"
                  :step="0.0001"
                  :min="0"
                  :max="1"
                ></el-input-number>
                <span> %</span>
              </div>
              <div class="haruyuki-line-height-special haruyuki-plr-80" v-if="dataItem.merchantForm.isShowVip == 1">
                <span>尊享费率（比例）：</span>
                <el-input-number
                  size="mini"
                  v-model="dataItem.merchantForm.vipRate"
                  :precision="4"
                  :step="0.0001"
                  :min="0"
                  :max="1"
                ></el-input-number>
                <span> %</span>
              </div>
            </div>
          </div>
          <!-- START 刷卡 -->
          <div
            class="haruyuki-line-height-special haruyuki-plr-40"
            @click.stop="dataItem.posTrad.isShow = !dataItem.posTrad.isShow"
          >
            <i
              :class="
                dataItem.posTrad.isShow
                  ? 'el-icon-caret-bottom'
                  : 'el-icon-caret-right'
              "
            ></i>
            <span>刷卡(费率设置)：</span>
          </div>
          <div
            v-show="dataItem.posTrad.isShow"
          >
            <div class="haruyuki-line-height-special haruyuki-plr-80">
              <span>垫资费率（比例）：</span>
              <el-input-number
                size="mini"
                v-model="dataItem.posTrad.codeAdvanceRate"
                :precision="4"
                :step="0.0001"
                :min="0"
                :max="1"
              ></el-input-number>
              <span> %</span>
            </div>
            <div class="haruyuki-line-height-special haruyuki-plr-80">
              <span>贷记卡刷卡结算底价（比例）：</span>
              <el-input-number
                size="mini"
                v-model="dataItem.posTrad.creditRate"
                :precision="4"
                :step="0.0001"
                :min="0"
                :max="1"
              ></el-input-number>
              <span> %</span>
            </div>
            <div class="haruyuki-line-height-special haruyuki-plr-80">
              <span>借记卡刷卡结算底价（比例）：</span>
              <el-input-number
                size="mini"
                v-model="dataItem.posTrad.debtRate"
                :precision="4"
                :step="0.0001"
                :min="0"
                :max="1"
              ></el-input-number>
              <span> %</span>
            </div>
            <div class="haruyuki-line-height-special haruyuki-plr-80">
              <span>借记卡刷卡封顶金额（笔）：</span>
              <el-input-number
                size="mini"
                v-model="dataItem.posTrad.debtRateMax"
                :precision="2"
                :step="0.1"
                :min="0"
              ></el-input-number>
              <span> ¥</span>
            </div>
            <div class="haruyuki-line-height-special haruyuki-plr-80">
              <span>挥卡小额（{{ thousandMin }}）结算底价（比例）：</span>
              <el-input-number
                size="mini"
                v-model="dataItem.posTrad.waveRate"
                :precision="2"
                :step="0.1"
                :min="0"
                :max="1"
              ></el-input-number>
              <span> %</span>
            </div>
            <div class="haruyuki-line-height-special haruyuki-plr-80" v-if="dataItem.posTrad.isShowVip == 1">
              <span>银联费率（比例）：</span>
              <el-input-number
                size="mini"
                v-model="dataItem.posTrad.unionpayRate"
                :precision="4"
                :step="0.0001"
                :min="dataItem.posTrad.unionpayRateMin"
                :max="1"
              ></el-input-number>
              <span> %</span>
            </div>
            <div class="haruyuki-line-height-special haruyuki-plr-80" v-if="dataItem.posTrad.isShowVip == 1">
              <span>尊享费率（比例）：</span>
              <el-input-number
                size="mini"
                v-model="dataItem.posTrad.vipRate"
                :precision="4"
                :step="0.0001"
                :min="dataItem.posTrad.vipRateMin"
                :max="1"
              ></el-input-number>
              <span> %</span>
            </div>
          </div>
          <!-- END 刷卡 -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getDictionary } from "@/api/system/dict";
import { getAisleOemList } from "@/api/rb-oem/serviceinfo/service_info";
import { getTemplateDetail } from "@/api/rb-oem/serviceTemplate/service_template";
let intId = 1;
let pid = 1000;
export default {
  props: {
    policyForm: Object,
    oem: Object,
  },
  data() {
    return {
      policyRules: {
        polName: [
          { required: true, message: "请输入政策名称", trigger: "blur" },
        ],
        polType: [
          { required: true, message: "请输入政策类型", trigger: "blur" },
        ],
        aisleData: [{ required: true, message: "请选择通道", trigger: "blur" }],
      },
      data: [], //通道政策 树形数据
      polTypeList: [],
      aisleList: [],
      aptTemplate: {
        aptRate: -1,
        aptScale: -1,
      },
      thousandMin: '<1000'
    };
  },
  watch: {},
  created() {
    this.data = [];
    this.doGetDicts();
    this.getAisleSelect();
  },
  methods: {
    /* 字典 */
    doGetDicts() {
      getDictionary({code: "pol_type"}).then((res) => {
        this.polTypeList = res.data.data;
      });
    },
    /* 通道列表 */
    getAisleSelect() {
      getAisleOemList("-1", "-1").then((res) => {
        this.aisleList = res.data.data.records;
      });
    },
    /* 选中通道 渲染政策模板 */
    templateAllChange(e) {
      this.$confirm("是否为该通道新增模板?", "新增模板", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          if (this.data.length > 0) {
            for (const item of this.data) {
              if (e.aisleCode === item.aisleCode) {
                this.$message({
                  type: "warning",
                  message: "无法重复新增此通道为模板！",
                });
                return false;
              }
            }
          }
          getTemplateDetail({"aisleCodeList":[e.aisleCode]}).then((res) => {
            if (res.data.code == "200") {
              let initData = res.data.data;
              this.$set(initData, "isShow", true);
              this.$set(initData.serviceForm, "isShow", true);
              this.$set(initData.merchantForm, "isShow", true);
              this.$set(initData.posTrad, "isShow", true);
              this.data.push(initData);
              // this.$nextTick(() => {
              //   this.data = JSON.parse(JSON.stringify(initData));
              //   // console.log(this.data, 'temp---data')
              // });
              this.$message({
                type: "success",
                message: "新增成功!",
              });
            } else {
              this.$message({
                type: "error",
                message: res.data.message,
              });
            }
          });
        })
        .catch(() => {
          // 取消
          this.policyForm.aisleData = null;
        });
    },
    /* 编辑政策模板详情方法 */
    getEditDatail(data) {
      this.data = data.aisleRateList;
      for (let i = 0; i < this.data.length; i++) {
        this.$set(this.data[i], "isShow", true);
        if (this.data[i].serviceForm) this.$set(this.data[i].serviceForm, "isShow", true);
        if (this.data[i].merchantForm) this.$set(this.data[i].merchantForm, "isShow", true);
        if (this.data[i].posTrad) this.$set(this.data[i].posTrad, "isShow", true);
      }

      this.$nextTick(() => {
        this.data = JSON.parse(JSON.stringify(this.data));
      });
    },
    /* 删除对应的通道政策 */
    policyDelete(i) {
      this.$confirm("是否删除该通道政策模板?", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          this.data.splice(i, 1);
          this.policyForm.aisleData = null;
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          // 已取消
        });
    },
    /* 全通道政策模板 一键填入 */
    submitCover() {
      if (this.aptTemplate.aptRate == 0) {
        this.$message({
          type: "warning",
          message: "请输入成本费率",
        });
      } else if (this.aptTemplate.aptScale == 0) {
        this.$message({
          type: "warning",
          message: "请输入结算比例",
        });
      } else {
        for (let d = 0; d < this.data.length; d++) {
          this.data[d].aptRate = this.aptTemplate.aptRate;
          this.data[d].aptScale = this.aptTemplate.aptScale;
        }
      }
    },
    /* 新增阶梯 */
    ladderAppend(interData, interIndex, index) {
      let intData = JSON.parse(JSON.stringify(interData));
      intData.id = intId++;
      intData.aptStartMoney = intData.aptEndMoney;
      intData.aptEndMoney = intData.aptEndMoney + 1;
      intData.codeAdvanceRate = 0; //初始化 扫码垫资费费率
      intData.codeAdvanceMin = 0; //初始化 扫码垫资费费率最低值
      intData.aptGrade = intData.id; //阶段层级赋值

      // 刷卡 赋空值
      Object.keys(intData.posTrad).forEach(key=>{
        if (key !== 'isShow') {
          intData.posTrad[key] = 0;
        }
      })
      
      // 扫码 赋空值
      for (let j = 0; j < interData.productList.length; j++) {
        intData.productList[j].id = pid++;
        for (
          let k = 0;
          k < interData.productList[j].singlePayInterval.length;
          k++
        ) {
          intData.productList[j].singlePayInterval[k].aptMin = 0;
          intData.productList[j].singlePayInterval[k].aptRate = 0;
          intData.productList[j].singlePayInterval[k].aptScale = 0;
          intData.productList[j].singlePayInterval[k].creditAptMin = 0;
          intData.productList[j].singlePayInterval[k].creditAptRate = 0;
          intData.productList[j].singlePayInterval[k].creditAptScale = 0;
        }
      }
      this.data[index].intervalList.push(intData);
    },
    /* 删除阶梯 */
    ladderRemove(interIndex, index) {
      this.data[index].intervalList.splice(interIndex, 1);
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/.el-tree-node__content {
  height: 40px;
  line-height: 40px;
  // background: #eeeeee;
  // border: 1px solid #eeeeee;
}

.aisle-policy-box {
  border: 1px solid #e0eafc;
  box-shadow: 0 2px 12px rgba(224, 234, 252, 0.8);
}
.aisle-policy-bg {
  background-color: #e0eafc;
  padding: 10px 0;
}
.policy-mr-3 {
  margin-right: 3px;
}
.policy-ml-3 {
  margin-left: 3px;
}
</style>